<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>突发事件报送首页</title>
    <link rel="stylesheet" href="./src/css/normalize.css">
    <link rel="stylesheet" href="./src/css/index.css">

</head>


<body>
    <div class="wrapper">
        <div class="top-box">
            <div class="left-table">
                <div class="all-tit">
                    <img src="./src/img/title-icon1.png" alt="">
                    各地区突发事件情况
                </div>
                <table>
                    <thead>
                        <tr>
                            <td>
                                河南省
                            </td>
                        </tr>
                        <tr style="background: none; box-shadow: 0 0 0">
                            <td>
                                <div class="search-box">
                                    <p>事发时间：</p>
                                    <select class="form-control">
                                        <option>2019-02-01</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                    </select>
                                    <select class="form-control">
                                        <option>2019-02-01</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                    </select>
                                    <a href="javascript:;">查询</a>
                                </div>
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <img src="./src/img/t1.png" alt="">

                                <div class="inline-block">
                                    <p class="num" style="color: #069869;font-weight:bold;">999</p>
                                    <p>突发事件总数</p>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img src="./src/img/t2.png" alt="">

                                <div class="inline-block">
                                    <p class="num">999</p>
                                    <p>一般事件</p>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img src="./src/img/t3.png" alt="">

                                <div class="inline-block">
                                    <p class="num">999</p>
                                    <p>较大事件</p>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img src="./src/img/t4.png" alt="">

                                <div class="inline-block">
                                    <p class="num">999</p>
                                    <p>重大事件</p>
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td>
                                <img src="./src/img/t5.png" alt="">

                                <div class="inline-block">
                                    <p class="num">999</p>
                                    <p>特大事件</p>
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td>
                                <img src="./src/img/t6.png" alt="">
                                <div class="inline-block">
                                    <p style="color:#0F78C9">查看地图详细分布</p>
                                </div>
                            </td>

                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="middle-map">
                <div id="map" style="width: 100%;height:100%"></div>
                <div class="location-txt">
                    <img src="./src/img/location-icon.png" alt="">
                    河南省</div>
            </div>
            <div class="right-bar">
                <div id="bar" style="width: 100%;height:100%"></div>
            </div>
        </div>

        <div class="nav-box">
            <div class="all-tit">
                <img src="./src/img/title-icon2.png" alt="">
                常用功能导航
            </div>
            <div class="nav-table" style="padding-bottom: 60px;">
                <table style="table-layout:auto;">
                    <thead>
                        <tr>
                            <td style="padding-bottom: 60px;" colspan="5"> <span class="tit-icon"></span> 事件报送/申请</td>
                            <td style="padding-bottom: 60px;" colspan="3"><span class="tit-icon"></span>事件签收/审核</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <img src="./src/img/t-b-01.png" alt="">
                                <div class="inline-block">
                                    <!-- <p class="num">8</p> -->
                                    <p>突发事件初报</p>
                                </div>
                            </td>
                            <td style="width:28px; padding: 0;box-shadow: 0 0 0;background: none;">
                                <img style="position: absolute; top: 50%;transform: translateY(-50%)"
                                    src="./src/img/arrow-right.png" alt="">
                            </td>
                            <td>
                                <img src="./src/img/t-b-02.png" alt="">
                                <div class="inline-block">
                                    <!-- <p class="num">8</p> -->
                                    <p>突发事件续报</p>
                                </div>
                            </td>
                            <td style="width:28px; padding: 0;box-shadow: 0 0 0;background: none;">
                                <img style="position: absolute; top: 50%;transform: translateY(-50%)"
                                    src="./src/img/arrow-right.png" alt=""> </td>

                            <td style="padding: 0;box-shadow:0 0 0 ; width:150px;">
                                <div class="box-item">
                                    <div class="td-style">
                                        <img src="./src/img/t-b-03.png" alt="">
                                        <div class="inline-block">
                                            <!-- <p class="num">8</p> -->
                                            <p>突发事件核销</p>
                                        </div>
                                    </div>
                                    <div class="td-style">
                                        <img src="./src/img/t-b-04.png" alt="">
                                        <div class="inline-block">
                                            <!-- <p class="num">8</p> -->
                                            <p>突发事件结案</p>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <img src="./src/img/t-b-05.png" alt="">
                                <div class="inline-block">
                                    <p class="num">8</p>
                                    <p>初报/续报签收</p>
                                </div>
                            </td>
                            <td>
                                <img src="./src/img/t-b-06.png" alt="">
                                <div class="inline-block">
                                    <p class="num">8</p>
                                    <p>事件核销审核</p>
                                </div>
                            </td>
                            <td>
                                <img src="./src/img/t-b-07.png" alt="">
                                <div class="inline-block">
                                    <p class="num">8</p>
                                    <p>事件结案审核</p>
                                </div>
                            </td>


                        </tr>

                    </tbody>
                </table>
            </div>
            <div class="nav-table">
                <table>
                    <thead>
                        <tr>
                            <td colspan="4"><span class="tit-icon"></span>常用查询统计</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <img src="./src/img/t-b-1.png" alt="">
                                <div class="inline-block">
                                    <!-- <p class="num">8</p> -->
                                    <p>突发事件查询</p>
                                </div>
                            </td>
                            <td>
                                <img src="./src/img/t-b-2.png" alt="">
                                <div class="inline-block">
                                    <!-- <p class="num">8</p> -->
                                    <p>各地事件报送月报</p>
                                </div>
                            </td>
                            <td>
                                <img src="./src/img/t-b-3.png" alt="">
                                <div class="inline-block">
                                    <!-- <p class="num">8</p> -->
                                    <p>各地事件按类别统计 </p>
                                </div>
                            </td>
                            <td>
                                <img src="./src/img/t-b-4.png" alt="">
                                <div class="inline-block">
                                    <!-- <p class="num">8</p> -->
                                    <p>各地事件按级别统计</p>
                                </div>
                            </td>

                        </tr>

                    </tbody>
                </table>
            </div>
            <div class="nav-table">
                <table>
                    <thead>
                        <tr>
                            <td colspan="2"><span class="tit-icon"></span>交接班</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <img src="./src/img/t-b-5.png" alt="">
                                <div class="inline-block">
                                    <!-- <p class="num">8</p> -->
                                    <p>交接班登记</p>
                                </div>
                            </td>
                            <td>
                                <img src="./src/img/t-b-6.png" alt="">
                                <div class="inline-block">
                                    <!-- <p class="num">8</p> -->
                                    <p>各单位值班情况</p>
                                </div>
                            </td>



                        </tr>

                    </tbody>
                </table>
            </div>


        </div>


    </div>
    <script src="./src/js/jquery1.12.3.js"></script>
    <script src="./src/js/echarts.min.js"></script>
    <script>
        $(function () {
            showBar()
            showMap()

        })

        function showBar() {
            var myChart = echarts.init(document.getElementById('bar'));
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '许\n可\n证\n数\n量\n/\n家',
                    top: 150,
                    left: 10,
                    textStyle: {
                        color: '#858585',
                        fontSize: 14
                    }

                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                // legend: {
                //     data: ['2011年', '2012年']
                // },
                grid: {
                    left: 40,
                    top: 10,
                    right: 50,
                    bottom: 0,
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    show: false,
                    boundaryGap: [0, 0.01]
                },
                color: ['#5BD0FF'],
                yAxis: {
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#3d8dd3'
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    data: ['郑州市', '开封市', '洛阳市', '平顶山市', '安阳市', '鹤壁市', '新乡市', '焦作市', '濮阳市', '许昌市', '漯河市', '三门峡市',
                        '南阳市', '商丘市', '信阳市', '周口市', '驻马店市'
                    ]
                },
                series: [{

                    name: '许可证数量/家',
                    type: 'bar',
                    label: {
                        show: true,
                        position: 'right'
                    },
                    itemStyle: {
                        barBorderRadius: 3
                    },
                    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
                }]
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            $(window).on('resize', function () {
                myChart.resize();
            })
        }

        function showMap() {
            $.ajax({
                url: './henan.json',
                success: function (res) {
                    var myChart = echarts.init(document.getElementById('map'));
                    echarts.registerMap('henan', res)
                    myChart.setOption({
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                return params.name + "：" + params.data.value
                                // return params.name + "抽样" + params.data.check + "家<br/>其中不合格" + params.data.value + "家"
                            }
                        },
                        legend: {},
                        visualMap: {
                            show: true,
                            // min: 0,
                            // max: 100,
                            right: '2%',
                            top: 'bottom',
                            itemWidth: 16,
                            textStyle: {
                                color: '#4BCEEC',
                                fontSize: 12
                            },
                            text: [
                                '高', '低'
                            ], // 文本，默认为数值文本
                            calculable: true,
                            color: ['#4BCEEC', '#284CA9']
                        },
                        series: [{
                            name: '',
                            type: 'map',
                            zoom: 1.2,

                            roam: true, //鼠标可拖动
                            // aspectScale: 1.3,
                            showLegendSymbol: true,

                            // selectedMode:'single',
                            map: 'henan',
                            label: {
                                normal: {
                                    show: true
                                }
                            },
                            // itemStyle: {
                            //     normal: {
                            //         areaColor: '#ff7e22',
                            //         borderColor: '#fff',
                            //         color: '#0E7BD7'
                            //     },
                            //     emphasis: {
                            //         areaColor: '#e74710'
                            //     }
                            // },
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true
                                    },
                                    show: true,
                                    areaColor: '#323c48',
                                    borderColor: '#fff'
                                },
                                emphasis: {
                                    label: {
                                        show: true
                                    },
                                    areaColor: 'rgba(15,197,255, 0.8)'
                                }
                            },

                            data: [{
                                name: '郑州市',
                                value: 22,
                                check: 121
                            }, {
                                name: '安阳市',
                                value: 24,
                                check: 122
                            }, {
                                name: '洛阳市',
                                value: 23,
                                check: 142
                            }, {
                                name: '濮阳市',
                                value: 92,
                                check: 126
                            }, {
                                name: '周口市',
                                value: 24,
                                check: 12
                            }, {
                                name: '驻马店市',
                                value: 23,
                                check: 122
                            }, {
                                name: '信阳市',
                                value: 34,
                                check: 12
                            }, {
                                name: '南阳市',
                                value: 12,
                                check: 132
                            }, {
                                name: '三门峡市',
                                value: 1222,
                                check: 132
                            }, {
                                name: '漯河市',
                                value: 12,
                                check: 132
                            }, {
                                name: '平顶山市',
                                value: 12,
                                check: 122
                            }, , {
                                name: '许昌市',
                                value: 12,
                                check: 122
                            }, , {
                                name: '济源市',
                                value: 12,
                                check: 122
                            }, , {
                                name: '焦作市',
                                value: 12,
                                check: 122
                            }, , {
                                name: '新乡市',
                                value: 12,
                                check: 122
                            }, , {
                                name: '鹤壁市',
                                value: 12,
                                check: 122
                            }, , {
                                name: '安阳市',
                                value: 12,
                                check: 122
                            }, , {
                                name: '开封市',
                                value: 12,
                                check: 122
                            }, {
                                name: '商丘市',
                                value: 12,
                                check: 122
                            }]
                        }]
                    });
                    $(window).on('resize', function () {
                        myChart.resize();
                    })
                }
            })


        }
    </script>
</body>

</html>